layui.define(['jquery', 'febs'], function (exports) {
    'use strict';

    var $ = layui.jquery;
    var obj = {
        /**
         * @param data  json 数据
         * @param ele   容器
         * @param currentStep 当前步骤
         * @param fields 定义展示字段名
         * @param isLeapfrog 是否越级  (默认false) 
         * @param isShowTable 是否点击展示审批进度表格  (默认false) 
         * @param handleIdxs 可点击下标  (默认不穿) 
         * @param handleUrl 可点击下标请求url  (默认不穿) 
         */
        make: function ({ data, ele, currentStep, fields, isLeapfrog, isShowTable, handleIdxs, handleUrl }) {
            let html = ''
                , data_length = data.length
                , percentage = 100 / data_length;

            for (let i = 0; i < data_length; i++) {
                let icon = ''
                    , tail = ''
                    , color = ''
                    , fontWeight = '';
                if (i < (currentStep - 1)) {
                    if (isLeapfrog) { // 越级
                       if (data[i][fields.done]) icon = 'layui-icon-ok';
                    } else {
                        icon = 'layui-icon-ok';
                    }
                    
                    tail = 'step-item-tail-done';
                    color = 'layui_color_Success';
                } else if (i == (currentStep - 1)) { // 当前审批节点字体加粗
                    fontWeight = 'font_Weight';
                }

                var temp = `<div class="step-item" style="width: ${ percentage }%;">`;

                if (parseInt(i) + 1 < data_length) {
                    temp += `
                        <div class="step-item-tail">
                            <i class="${ tail }"></i>
                        </div>
                    `;
                }
                
                if (icon) {
                    temp += `
                        <div class="step-item-head" step-index = "${data[i][fields.id]}">
                            <i class="layui-icon ${ icon }"></i>
                        </div>
                    `;
                } else {
                    temp += `
                        <div class="step-item-head step-item-head-active" step-index = "${data[i][fields.id]}">
                            <i class="layui-icon">${ (parseInt(i) + 1) }</i>
                        </div>
                    `;
                }
                let desc_html = `<div class="">${ data[i][fields.desc] }</div>`;
                if(data[i][fields.desc]  === '上传图纸'){
                    desc_html = `<div class="desc">${ data[i][fields.desc] }</div>`;
                }

                if (isShowTable && handleIdxs.includes(i)) { // 年度计划 - 计划确认 - 步骤可点击
                    temp += `
                        <div 
                            class="open_steps_table step-item-main cursor_pointer ${color} ${fontWeight}"
                            data-index="${i}"
                            data-url="${handleUrl[i]}">
                            ${desc_html}
                        </div>
                    `;
                } else {
                    temp += `
                        <div class="step-item-main ${color} ${fontWeight}">${desc_html}</div>
                    `;
                }

                html += temp + '</div>';
            }

            $(ele).html(html);
        }
    };
    exports('steps', obj);
});